<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        .elasticity{
            width: 400px;
            height: 400px;
            background-color: green;
            /*弹性盒子*/
            display: flex;
            flex-direction: column-reverse;
            /*row：横向排列（默认）*/
            /*row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面*/
            /*column：纵向排列*/
            /*column-reverse：反转纵向排列，从后往前排，最后一项排在最上面*/

            justify-content: center;
            /*justify-content: flex-start | flex-end | center*/
            /*内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐*/
            /*lex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放*/
            /*flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放*/
            /*center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）*/
            align-items: center;
        }
        .elasticity1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            flex: 100px;
        }
        .elasticity2{
            width: 100px;
            height: 100px;
            background-color: darkred;
            flex-grow: 100px;
        }
        .elasticity3{
            width: 100px;
            height: 100px;
            background-color: darkgray;
            flex-grow: 3;
        }
    </style>
</head>
<body>
<div class="elasticity">
<div class="elasticity1"><p>弹性盒子1</p></div>
<div class="elasticity2"><p>弹性盒子2</p></div>
<div class="elasticity3"><p>弹性盒子3</p></div>
</div>
</body>
</html>